<template>
  <vxe-modal v-model="dialogVisible" title="高级查询" resize show-zoom show-footer :width="isMobile?'100%':'60%'">
    <el-form
      :model="queryData"
      label-width="90px"
      label-position="right"
    >
      <vxe-toolbar>
        <template #buttons>
          <vxe-button type="text" status="primary" @click="createTableRow(-1)">新增一行</vxe-button>
        </template>
      </vxe-toolbar>
      <vxe-table
        ref="xTable"
        :data="queryData.tableData"
      >
        <vxe-column field="start" title="(" width="60">
          <template #default="{row}">
            <vxe-select v-model="row.start" transfer>
              <vxe-option value="(" label="(" />
              <vxe-option value="((" label="((" />
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column field="field" title="字段名称">
          <template #default="{row}">
            <vxe-select v-model="row.field" transfer filterable :options="form" :option-props="{value: 'field'}" />
          </template>
        </vxe-column>
        <vxe-column field="condition" title="条件">
          <template #default="{row}">
            <vxe-select v-model="row.condition" transfer filterable :options="initCondition(row.field)" />
          </template>
        </vxe-column>
        <vxe-column field="value" title="值">
          <template #default="{row}">
            <vxe-input v-model="row.value" />
          </template>
        </vxe-column>
        <vxe-column field="end" title=")" width="60">
          <template #default="{row}">
            <vxe-select v-model="row.end" transfer>
              <vxe-option value=")" label=")" />
              <vxe-option value="))" label="))" />
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column field="op">
          <template #default="{row}">
            <vxe-button type="text" status="primary" @click="createTableRow(row)">新增</vxe-button>
            <vxe-button type="text" status="danger" @click="deleteTableRow(row)">删除</vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
    </el-form>
    <template #footer>
      <vxe-button status="primary" content="提交" />
    </template>
  </vxe-modal>
</template>

<script>
export default {
  name: 'SuperQueryModal',
  props: {
    form: {
      required: false,
      type: Array,
      default: () => ([])
    },
    formData: {
      required: false,
      type: Object,
      default: () => ({})
    },
    value: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
    dialogVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    queryData: {
      get() {
        return this.formData
      },
      set(val) {
        this.$emit('update:formData', val)
      }
    }
  },
  mounted() {

  },
  methods: {
    initCondition(field) {
      const currentField = this.form.find(t => t.field === field)
      return currentField ? currentField.conditionList : [{ value: '=', label: '等于' }]
    },
    async createTableRow(row) {
      const $table = this.$refs.xTable
      const record = { start: '(', field: '', condition: '', value: '', end: ')', concat: '' }
      await $table.insertNextAt(record, row)
    },
    async deleteTableRow(row) {
      const $table = this.$refs.xTable
      await $table.remove(row)
    },
    clickSubmitBtn() {
      this.$emit('success')
    }
  }
}
</script>

<style>

</style>
